import {makeAutoObservable, autorun, reaction} from 'mobx'
import type { Todo, Todos } from './types'

class TodosStore {
  todos: Todos = JSON.parse(localStorage.getItem('TODOS_KEY')!) || []

  get completeSize () {
    return this.todos.reduce((pre, todo) => pre + (todo.complete?1:0), 0)
  }

  constructor () {
    makeAutoObservable(this)

    autorun(() => { // 初始调用一次/ 依赖数据发生改变时再调用 => 深度监视
      console.log('autorun....')
      localStorage.setItem('TODOS_KEY', JSON.stringify(this.todos))
    })
    // reaction(
    //   () => this.todos,
    //   (value) => {
    //     console.log('reaction.....')
    //     localStorage.setItem('TODOS_KEY', JSON.stringify(value))
    //   }
    // )
  }

  // 添加todo
  addTodo (title: string) {
    // 创建todo
    const todo: Todo = {
      id: Date.now(), // 保存id不重复
      title,
      complete: false, // 未完成的
    }
    // 更新todos
    this.todos.unshift(todo)
  }

  // 删除todo
  deleteTodo (id: number) {
    const index = this.todos.findIndex(todo => todo.id===id)
    this.todos.splice(index, 1)
  }

  // 切换todo的complete
  toggleTodo (id: number) {
    this.todos.forEach(todo => {
      if (todo.id===id) {
        todo.complete = !todo.complete
      }
    })
  }

  // 清除所有已完成的todo
  clearCompleteTodos (){
    const newTodos = this.todos.filter(todo => !todo.complete)
    this.todos = newTodos
  }
  // 全选或全不选
  selectAllTodos (isCheck: boolean) {
    this.todos.forEach(todo => {
      todo.complete = isCheck
    })
  }
}

export default new TodosStore()